<template>
	<view >
		<!-- <text style="color: black;">sadsad</text> -->
		<view class="body" v-if="imageList.length">
			<view class="dit-imgs" v-for="(item, index) in imageList" @click="commodityUrl(item.id)">
				<image :src=" url + item.mainImage" mode="aspectFill"></image>
				<view class="img-text">
					<text class="hot-text-name">
						<text class="tag" style="margin-right: 10rpx">全新</text>
						 <text style="color: black;"> {{ item.productName }}</text>
					</text>
					<view class="numberDate">
					<!-- 	<text style="font-weight: bold; font-size: 35rpx">￥{{ cut(item, true) }}</text> -->
						<text style="font-weight: bold; font-size: 35rpx">￥{{ item.minTenancy }}</text>
						<!-- <text>{{ cut(item, true) ? '.' + cut(item, false) : '' }}/天</text> -->
						<text>/天</text>
					</view>
				</view>
			</view>
		</view>

		<view v-else class="emp">
			<u-empty mode="data" icon="/static/main/image2x.png"></u-empty>
		</view>
	</view>
</template>

<script>
import { numberCut } from '@/utils/index.js';

import { baseUrl } from  '../../config.js'

export default {
	name: 'recommend',
    
	props: {
		imageList: {
			type: Array,
			required: true
		},
        // id:this.id
	},
	data() {
		return {
			 url:"",
		};
	},
	methods: {
		commodityUrl(id) {
            this.id=id;
            console.log(this.id,"id===")
            console.log(id,"id-recommed")
			uni.navigateTo({
				// 正确方式：使用 ${id} 插入变量
				url: `/subPages/main/commodity?id=${id}`

                
			});
		},
		cut(row, bool) {
			let number;
			if (!row.leaseGoodSkus) {
				number = 0;
			} else if (!row.leaseGoodSkus[0].leaseRentalRules) {
				number = 0;
			} else {
				number = row.leaseGoodSkus[0].leaseRentalRules[0].everydayPrice;
			}

			return numberCut(number || 0, bool);
		}
	},
	mounted() {
	
		setTimeout(()=>{
			  console.log("sadsadsad",this.imageList)
			  this.url = baseUrl;
			
		},500)
		
	}
};
</script>

<style lang="scss" scoped>
.body {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;

	.dit-imgs {
		margin: 20rpx;
		border-radius: 20rpx;
		width: 300rpx;
		height: 400rpx;
		background-color: #fff;

		display: flex;
		justify-content: center;
		flex-direction: column;

		image {
			margin: 30rpx;
			width: 250rpx;
			height: 250rpx;
		}

		.img-text {
			margin: 0 20rpx;

			.hot-text-name {
				display: -webkit-box;
				-webkit-line-clamp: 2; /* 限制为两行 */
				-webkit-box-orient: vertical;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: normal; /* 允许文本换行 */
			}

			.numberDate {
				color: red;
				font-size: 25rpx;
			}
		}
	}
}
</style>
